<!-- 登陆页面 -->
<template>
	<!-- 授权登录 -->
	<view class="container">
		<view class="headView_c">
			  <view class='headView'>
				<open-data class='icon1' mode="aspectFit" type="userAvatarUrl"></open-data>
				<view class='icon'></view>
			</view>
			    <view class='titleText'>申请获取以下权限</view>
			    <view class='contentText'>获得你的公开信息(昵称,头像,性别等)</view>
			<button class='authBtn' type='primary' open-type="getUserProfile" @click="getUserProfile">授权登录</button>
			<view class="logo_xieyi">
				<checkbox-group @change="checkboxGroupChange">
					<label style="display: flex;">
						<checkbox :value="1" :checked="checked" style="transform: scale(0.7);" />
						<view class="logo_text">请勾选并阅读<text @click.stop="ElevatorGoClick('https://www.zytsaas.com/Agreement/ElevatorGo_FWXY.html', '服务协议')">《服务协议》</text>及<text
								@click.stop="ElevatorGoClick('https://www.zytsaas.com/Agreement/ElevatorGo_YSZC.html', '隐私政策')">《隐私政策》</text>
						</view>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入公共接口
	import {
		// 授权登录
		authUser,
		// 用户登录日志
		LoginInfoLog,
	} from '../interface.js'


	import {
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				checked: false, //是否勾选隐私政策服务协议
				isOpen: false,
			};
		},
		onShow() {
			// storage.removeSessionList(["userInfo", "merchantsVO"]);
		},
		methods: {
			// 用户协议隐私政策点击
			checkboxGroupChange(event){
				this.checked=!this.checked
				if(event.detail.value.length==0) this.checked=false
				else this.checked = true
			},
			// 隐私政策服务协议
			ElevatorGoClick(url, title) {
				uni.navigateTo({
					url: '/subPackagesA/pages/webview/webview?url=' + url + '&title=' + title
				})
			},
			// 授权登录
			getUserProfile() {
				if (!this.checked) return uni.showToast({
					"title": "请阅读并勾选用户协议",
					"icon": 'none'
				})
				var that = this
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: function(e) {
						const info = e.userInfo;
						console.log('getUserProfile结果', e, info)
						uni.login({
							success: function(res) {
								console.log('uni。login返回', res)
								const obj = {
									wxCode: res.code,
									NickName: info.nickName,
									Sex: info.gender,
									Icon: info.avatarUrl
								}
								authUser(obj).then(
									res => {
										console.log('获取程工结果', res, res.Data)
										uni.showToast({
											title: '已授权',
											icon: 'none'
										})
										if (res.Success) {
											uni.setStorageSync('token', res.Data.UserToken);
											that.$store.commit('setUserInfo', res.Data.VipUserInfo)
											uni.setStorageSync('userInfo', res.Data.VipUserInfo);
											let userInfo = wx.getStorageSync('userInfo')
											if (userInfo) {
												LoginInfoLog(userInfo).then(res => {
													console.log('loginInfoLog结果', res);
												})
											}
											uni.switchTab({
												url: "/pages/index/index"
											})
										} else {}
									},
									error => {
										uni.showToast({
											title: res.Msg,
											icon: 'none'
										})
									},
								)
							}
						})
					}
				})
			}

		},
	};
</script>

<style lang="scss" scoped>
	.cuIcon-square {
		background-color: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-squarecheckfill {
		background-color: #d1100b;
		border: 3px #ccc solid;
		box-sizing: border-box;
		padding: 5rpx;
		border-radius: 3px;
	}

	.logo_xieyi {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 27rpx;
		justify-content: center;
	}

	.logo_xieyi {
		.label {
			border: 1px solid #ccc;
			font-size: 26rpx;
			margin-right: 1%;
			display: block;
			width: 30rpx;
			height: 30rpx;

		}
	}

	.logo_text {
		text {
			color: #d1100b;
		}
	}

	.headView_c {
		margin: 0 50rpx 90rpx 50rpx;
		padding-top: 90rpx;
	}

	.headView {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		height: 300rpx;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	/**
	*open-data 的头像做不了圆角
	*这里是覆盖一个镂空的view在上面 镂空view的边界做成与周围背景颜色一样 做了伪圆角
	**/
	.headView .icon {
		position: absolute;
		height: 116px;
		width: 116px;
		border-radius: 50%;
		border: 45px solid #ffffff;
	}

	headView .icon1 {
		height: 180rpx;
		width: 180rpx;
	}

	.titleText {
		margin-top: 25px;
		margin-bottom: 10px;
		font-size: 14px;
		color: #020e0f;
		text-align: center;
	}

	.contentText {
		margin-top: 0px;
		margin-bottom: 0px;
		font-size: 14px;
		color: #666;
		text-align: center;
	}

	.authBtn {
		margin-top: 35px;
		font-size: 35rpx;
	}
</style>